import Base from "./Base";
import { EventNames, Props } from "src/types/shape";
import Arc from "./Arc";
import utils from "src/utils";
import videoFrame from "./VideoFrame";

export default class extends Base {
  progress: number = 0
  arc: Base
  parent: videoFrame
  video: HTMLVideoElement
  enable: boolean = false
  isActive: boolean = false
  arcActive: boolean = false
  readonly bgColor: string = '#ffffff'
  readonly bgColor1: string = '#999185'
  constructor(option: Props, parent: videoFrame, video: HTMLVideoElement) {
    super()
    utils.object.Assign(option, this.props)
    this.parent = parent
    this.arc = new Arc({ x: this.props.x, y: this.props.y + this.props.height / 2, radius: 6 })
    this.arc.props.bgcolor = this.bgColor
    this.video = video
  }
  handleEvent(canvas: HTMLCanvasElement) {
    this.on(EventNames.mousedown, (event: MouseEvent) => {
      const rect = canvas.getBoundingClientRect()
      const dx = event.clientX - rect.left
      this.arc.props.x = (this.props.x + (dx - (this.props.x - this.parent.props.width / 2)) - this.parent.props.lateX)

      this.progress = (this.arc.props.x - this.props.x) / this.props.width
      if (!isNaN(this.video.currentTime) && !isNaN(this.video.duration)) {
        this.video.currentTime = this.progress * this.video.duration
      }
    })
    this.on(EventNames.mousemove, () => {
      document.body.style.cursor = 'pointer'
    })
    this.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
    })
    this.on(EventNames.mouseenter, () => {
      this.isActive = true
    })
    this.on(EventNames.mouseleave, () => {
      this.checkActive()
      this.parent.checkActive()
    })
    this.arc.on(EventNames.mouseenter, () => {
      this.isActive = true
      this.arcActive = true
    })
    this.arc.on(EventNames.mousedown, () => {
      this.enable = true
    })
    this.arc.on(EventNames.mousemove, () => {
      document.body.style.cursor = 'pointer'
    })
    this.arc.on(EventNames.mouseleave, () => {
      document.body.style.cursor = 'default'
      this.arcActive = false
      this.checkActive()
    })
    document.addEventListener(EventNames.mousemove, (event: MouseEvent) => {
      if (!this.enable) return

      const rect = canvas.getBoundingClientRect()
      const dx = event.clientX - rect.left

      const disx = this.props.x + (dx - (this.props.x - this.parent.props.width / 2)) - this.parent.props.lateX

      if (disx < this.props.x) {
        this.arc.props.x = this.props.x
      } else if (disx > this.props.x + this.props.width) {
        this.arc.props.x = this.props.x + this.props.width
      } else {
        this.arc.props.x = disx
      }
    })
    document.addEventListener(EventNames.mouseup, () => {
      this.enable = false
      this.progress = (this.arc.props.x - this.props.x) / this.props.width
      // if(this.video.paused || this.video.ended || this.video.seeking || this.video.readyState < this.video.HAVE_FUTURE_DATA) this.video.play()
      if (!isNaN(this.video.currentTime) && !isNaN(this.video.duration)) {
        this.video.currentTime = this.progress * this.video.duration
      }
    })
  }
  checkActive() {
    if (!this.isActive && !this.arcActive) this.isActive = false
  }
  updateProgress() {
    this.arc.props.x = this.props.x + this.props.width * this.progress
  }
  getFrame() {
    return [this.arc, this]
  }
  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height } = this.props

    if (!this.enable)
      this.updateProgress()
    ctx.save()
    // this.transform(ctx)
    // 底层背景
    ctx.beginPath()
    ctx.fillStyle = this.bgColor1
    ctx.fillRect(x, y, width, height)
    ctx.stroke()
    // 顶层进度条
    ctx.beginPath()
    ctx.fillStyle = this.bgColor
    ctx.fillRect(x, y, this.arc.props.x - x, height)
    ctx.stroke()
    if (this.isActive)
      this.arc.draw(ctx, osCtx)

    ctx.restore()

  }
  drawMirror(osCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height } = this.props

    // 镜像画布
    osCtx.save()

    // this.transform(osCtx)
    osCtx.beginPath()
    this.initOptions(osCtx, 2)
    osCtx.rect(x, y - height * 2, width, height * 4)
    osCtx.fill()
    osCtx.stroke()
    if (this.isActive)
      this.arc.drawMirror(osCtx)
    osCtx.closePath()

    osCtx.restore()
  }
}